<template>
  <div class="workbench-container scrollbar-no-width">
    <div class="workbench-header">
      <div class="user-info-container">
        <div class="user-avatar">
          <img style="" :src="common.getFileView(userInfo.avatar)" data-default="avatar" @error="handleImageError">
        </div>
        <div class="user-info-wrap">
          <div class="user-info-title">
            {{ T.getTimeState() }}好，{{ userInfo.realName }}，祝你开心每一天！
          </div>
          <div class="tag">
            <span v-for="(role,index) in roleInfos" :key="role.id" style="margin-right: 5px;">{{ role.roleName }}<template v-if="index !== roleInfos.length - 1">、</template></span>
            |
            {{ orgInfo.name }}
          </div>
        </div>
      </div>
      <div class="workbench-header-extra">
        <el-statistic
          class="extra-item"
          group-separator=","
          :precision="0"
          :value="56"
          title="项目数量" />
        <el-statistic
          class="extra-item"
          title="团队内排名">
          <template slot="formatter">
            8 / 24
          </template>
        </el-statistic>
        <el-statistic
          class="extra-item"
          group-separator=","
          :precision="0"
          :value="1234"
          title="项目访问" />
      </div>
    </div>
    <div class="workbench-main-wrap">
      <el-row :gutter="14">
        <el-col :xl="16" :xs="24" :sm="24" :md="16">
          <el-card class="common-el-card m-b-15">
            <div slot="header" class="clearfix">
              <span class="title">
                日程安排
              </span>
            </div>
            <div style="margin:-20px">
              <Fullcalendar
                ref="fullcalendar"
                height="550px"
                :lunar-show="false"
                :header-toolbar="{end: 'addEvent customPrev,today,customNext'}"
                @addEvent="handleAddEvent"
                @getCalendarApi="getCalendarApi"
                @changeTime="handleChangeTime"
              />
            </div>
          </el-card>

          <el-card class="common-el-card m-b-15">
            <div slot="header" class="clearfix">
              <span class="title">进行中的项目</span>
              <el-button style="float: right; padding: 3px 0" type="text">全部项目</el-button>
            </div>
            <c-list
              :data-source="projects"
              empty="暂无进行中的项目信息"
              layout="horizontal"
              :split="false"
              :gutter="15"
              class="project-list"
              item-layout="vertical"
              :item-border="true"
              item-width="320px">
              <template #item="{item}">
                <c-item :desc="item.desc">
                  <template #title>
                    <div class="project-header">
                      <img style="" :src="common.getFileView(item.photo)" data-default="avatar" @error="handleImageError">
                      <div class="project-title">{{ item.title }}</div>
                    </div>
                  </template>
                  <template #actions>
                    <div class="project-footer">
                      <div class="project-author">{{ item.author }}</div>
                      <div class="project-time">{{ item.gmtCreated | formatDate }}</div>
                    </div>
                  </template>
                </c-item>
              </template>
            </c-list>
          </el-card>
          <el-card class="common-el-card m-b-15">
            <div slot="header" class="clearfix">
              <span class="title">动态</span>
            </div>
            <c-list
              :data-source="dynamicList"
              empty="暂无动态信息"
              item-layout="vertical"
              :hover="false"
              class="dynamic-container">
              <template #item="{item}">
                <c-item :avatar="item.avatar" :title="item.content" desc-align="right" :title-noraml="true">
                  <template #desc>
                    {{ item.dateTime | formatDate }}
                  </template>
                </c-item>
              </template>
            </c-list>
          </el-card>
        </el-col>
        <el-col :xl="8" :xs="24" :sm="24" :md="8">
          <el-card class="common-el-card m-b-15">
            <div slot="header" class="clearfix">
              <span class="title">快捷入口</span>
            </div>
            <c-list
              :data-source="quickEntrances"
              layout="horizontal"
              :split="false"
              :gutter="5"
              item-width="90px"
              :item-between="true"
              class="quick-entrance-container"
              item-layout="vertical">
              <template #item="{item}">
                <div v-if="!item || item.name===undefined" class="quick-entrance-item" @click="handleAddQuickEntrance">
                  <div class="icon"><i class="el-icon-plus" /></div>
                  <div class="title">添加快捷</div>
                </div>
                <div v-else class="quick-entrance-item" @click="handleGoQuickEntrance(item.name)">
                  <div class="icon"><svg-icon :icon-class="item.icon" /></div>
                  <div class="title">{{ item.title }}</div>
                </div>
              </template>
            </c-list>
          </el-card>
          <el-card class="common-el-card m-b-15">
            <div slot="header" class="clearfix">
              <span class="title">
                <el-link :type="messageType==='1'?'primary':''" :underline="false" @click="handleFetchMsg('1')">通知公告</el-link>
                <el-link :type="messageType==='2'?'primary':''" :underline="false" @click="handleFetchMsg('2')">系统消息</el-link>
              </span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleMsgAll">全部</el-button>
            </div>
            <el-empty v-if="messages.length===0" description="暂无消息" :image-size="50" />
            <div class="msg-list">
              <div v-for="(message,index) in messages" :key="index" class="msg-item" @click="handleMsgLook(message.id)">
                <div class="msg-title">
                  <el-tag v-if="message.readFlag===1" size="mini" effect="plain"> 已读</el-tag>
                  <el-tag v-if="message.readFlag===0" size="mini" type="danger" effect="plain"> 未读</el-tag>
                  {{ message.noticeTitle }}
                </div>
                <div class="msg-time">{{ message.sendTime | formatDate }}.发布</div>
              </div>
            </div>
          </el-card>
          <el-card class="common-el-card m-b-15">
            <div slot="header" class="clearfix">
              <span class="title">团队</span>
            </div>
            <c-list
              :data-source="teams"
              empty="暂无团队信息"
              layout="horizontal"
              :split="false"
              :gutter="10"
              class="teams-container"
              item-layout="vertical">
              <template #item="{item}">
                <c-item :title-noraml="true">
                  <template #title>
                    <div class="team-item">
                      <img class="team-icon" :src="common.getFileView(item.icon)" data-default="avatar" @error="handleImageError">
                      <div class="team-title ellipsis" :title="item.title">{{ item.title }}</div>
                    </div>
                  </template>
                </c-item>
              </template>
            </c-list>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      quickEntrances: [{}, {
        icon: 'iconAccount',
        title: '用户',
        name: 'userManager'
      }, {
        icon: 'iconPermission',
        title: '菜单',
        name: 'menuManager'
      }, {
        icon: 'iconBrower',
        title: '文档',
        name: 'systemDocumentExplorer'
      }, {
        icon: 'iconAccount',
        title: '用户',
        name: 'userManager'
      }, {
        icon: 'iconPermission',
        title: '菜单',
        name: 'menuManager'
      }, {
        icon: 'iconBrower',
        title: '文档',
        name: 'systemDocumentExplorer'
      }],
      projects: [{
        photo: require('@/assets/images/banner1.png'),
        title: 'Alipay',
        desc: '那是一种内在的东西，他们到达不了，也无法触及的那是一种内在的东西，他们到达不了，也无法触及的那是一种内在的东西，他们到达不了，也无法触及的那是一种内在的东西，他们到达不了，也无法触及的那是一种内在的东西，他们到达不了，也无法触及的那是一种内在的东西，他们到达不了，也无法触及的那是一种内在的东西，他们到达不了，也无法触及的那是一种内在的东西，他们到达不了，也无法触及的',
        author: '阿里集团',
        gmtCreated: new Date().getTime()
      }, {
        photo: require('@/assets/images/banner1.png'),
        title: 'Angular',
        desc: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
        author: 'Google',
        gmtCreated: new Date().getTime()
      }, {
        photo: require('@/assets/images/banner1.png'),
        title: 'Ant Design',
        desc: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
        author: 'Google',
        gmtCreated: new Date().getTime()
      }, {
        photo: require('@/assets/images/banner1.png'),
        title: 'React',
        desc: '生命就像一盒巧克力，结果往往出人意料',
        author: '微软',
        gmtCreated: new Date().getTime()
      }, {
        photo: require('@/assets/images/banner1.png'),
        title: 'Vue',
        desc: '那时候我只会想自己想要什么，从不想自己拥有什么',
        author: '尤雨溪',
        gmtCreated: new Date().getTime()
      }],
      teams: [{
        icon: require('@/assets/images/banner1.png'),
        title: '销售'
      }, {
        icon: require('@/assets/images/banner1.png'),
        title: '研究院'
      }, {
        icon: require('@/assets/images/banner1.png'),
        title: '搬砖部'
      }, {
        icon: require('@/assets/images/banner1.png'),
        title: '生活部落'
      }, {
        icon: require('@/assets/images/banner1.png'),
        title: 'IT部落'
      }, {
        icon: require('@/assets/images/banner1.png'),
        title: '高逼格设计天团'
      }],
      dynamicList: [{
        avatar: require('@/assets/images/banner1.png'),
        content: '曲丽丽 在 高逼格设计天团 新建项目 六月迭代',
        dateTime: new Date().getTime()
      }, {
        avatar: require('@/assets/images/banner1.png'),
        content: '付小小 在 高逼格设计天团 新建项目 六月迭代',
        dateTime: new Date().getTime()
      }, {
        avatar: require('@/assets/images/banner1.png'),
        content: '林东东 在 中二少女团 新建项目 六月迭代',
        dateTime: new Date().getTime()
      }, {
        avatar: require('@/assets/images/banner1.png'),
        content: '周星星 将 5 月日常迭代 更新至已发布状态',
        dateTime: new Date().getTime()
      }, {
        avatar: require('@/assets/images/banner1.png'),
        content: '朱偏右 在 工程效能 发布了 留言',
        dateTime: new Date().getTime()
      }],
      messageType: '1',
      messages: []
    }
  },
  computed: {
  },
  watch: {
  },
  destroyed() {

  },
  created() {
    this.fetchMsg()
  },
  mounted() {
  },
  methods: {
    handleGoQuickEntrance(name) {
      this.$router.push({ name: name })
    },
    handleAddQuickEntrance() {
      this.$modal.msgSuccess('添加快捷方式')
    },
    getCalendarApi() {
      this.initTrip(new Date())
    },
    initTrip(date) {
      this.$store.dispatch('contentArticleAnalysisByTime', date.getTime()).then(res => {
        var events = []
        res.forEach(item => {
          events.push({
            title: `文章${item.number}篇`,
            start: item.name,
            end: item.name,
            display: 'list-item',
            textColor: '#000',
            borderColor: '#4a5dff'
          })
        })
        this.$refs.fullcalendar.updateOptions({
          events: events
        })
      })
      /* var trips = ['总部例会', '周会', '项目启动会', '项目组例会', '销售内部会']
      var events = []
      var colors = ['#FC5E65', '#00A870', '#4a5dff']
      for (var i = 0; i < 6; i++) {
        events.push({
          id: i,
          title: trips[this.T.random(0, 4)],
          start: this.T.formatDate(date.getTime(), 'yyyy-MM') + '-0' + i,
          end: this.T.formatDate(date.getTime(), 'yyyy-MM') + '-0' + i,
          display: 'list-item',
          textColor: '#000',
          borderColor: colors[this.T.random(0, 2)]
        })
      }
      this.$refs.fullcalendar.updateOptions({
        events: events
      })*/
    },
    // 选择月份
    handleChangeTime(arg) {
      this.initTrip(new Date(arg.date))
    },
    handleAddEvent(event) {
      // 此地方应该对接接口
      this.$refs.fullcalendar.addEvent({
        id: this.T.uuid(),
        title: event.title,
        allDay: event.allDay,
        start: new Date(event.start),
        end: new Date(event.end),
        display: 'list-item',
        borderColor: event.color
      })
      this.$refs.fullcalendar.handleAddEventCancel()
    },
    handleFetchMsg(type) {
      this.messageType = type
      this.fetchMsg()
    },
    fetchMsg() {
      this.$store.dispatch('currentUserNoticeSendPage', {
        page: 1,
        limit: 20,
        noticeType: this.messageType,
        sort: '-gmtCreated'
      }).then(res => {
        this.messages = res.records
      })
    },
    handleMsgAll() {
      this.$router.push({ path: '/message' })
    },
    handleMsgLook(id) {
      this.$router.push({ path: '/message/sendDetails', query: { id: id }})
    }
  }
}
</script>

<style lang="scss" scoped>
 .workbench-container{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    img{
      width: 100%;
      height: 100%;
    }
    .workbench-header{
      display: flex;
      flex-direction: row;
      height: 72px;
      margin-bottom: 16px;
      align-items: center;
      .user-info-container{
        flex:1;
        display: flex;
        flex-direction: row;
        .user-avatar{
          width: 60px;
          height: 60px;
          img{
            border-radius: 30px;
          }
        }
        .user-info-wrap{
          margin-left: 18px;
          align-content: center;
          .user-info-title{
            margin-bottom: 8px;
            color: rgba(0, 0, 0, 0.88);
            font-weight: 500;
            font-size: 18px;
            line-height: 20px;
          }
        }
      }
      .workbench-header-extra{
        display: flex;
        flex-direction: row;
        min-width: 242px;
        .extra-item{
          padding: 0 32px;
          width: auto;
          position: relative;
        }
        .extra-item:last-child{
          padding-right: 0px;
        }
        .extra-item::after {
          position: absolute;
          top: 8px;
          right: 0;
          width: 1px;
          height: 30px;
          background-color: rgba(5, 5, 5, 0.06);
          content: '';
        }
        .extra-item:last-child::after {
          position: absolute;
          top: 8px;
          right: 0;
          width: 0px;
          height: 0px;
          content: '';
        }
      }
    }
    .workbench-main-wrap{
      flex:1;
      .project-list{
        ::v-deep .c-list-item-meta-desc{
          height: 44px;
          overflow: hidden;
        }
        .project-header{
          display: flex;
          flex-direction: row;
          margin-bottom: 8px;
          img{
            width: 24px;
            height: 24px;
          }
          .project-title{
            margin-left: 12px;
          }
        }
        .project-footer{
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          .project-time{
            color: rgba(0, 0, 0, 0.45);
          }
        }
      }
      .msg-list{
        .msg-item{
          cursor: pointer;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          border-bottom: 1px solid rgba(5, 5, 5, 0.06);
          font-size: 14px;
          .msg-title{
            margin: 0 0 4px 0;
            color: rgba(0, 0, 0, 0.88);
            line-height: 28px;
          }
          .msg-time{
            text-align: right;
            color: rgba(0, 0, 0, 0.45);
            padding-bottom: 5px;
          }
        }
      }
      .teams-container{
        ::v-deep .c-list-item-meta-title{
          margin-bottom: 0px;
        }
        .team-item{
          display: flex;
          flex-direction: row;
          cursor: pointer;
          align-items: center;
          .team-title{
            margin-left: 12px;
            width: 50px;
          }
          .team-icon{
            margin-left: 5px;
            width: 22px;
            height:22px
          }
        }
      }
      .quick-entrance-container{
        .quick-entrance-item{
          text-align: center !important;
          cursor: pointer;
          justify-content: center;
          display: flex;
          flex-direction:column;
          .icon{
            .svg-icon{
              font-size: 24px;
            }
            i{
              font-size: 24px;
            }
          }
          .title{
            margin-top: 10px;
          }
        }
      }
    }
  }
</style>
